<!DOCTYPE html>
<!-- 提问页 -->
<!-- @author DHC -->
<!-- 2020/04/25 -->
<html style="background: white;">
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no viewport-fit=cover" />
		<script src="../../Common/js/tools.js"></script>
		<script src="../../Common/js/jump.js"></script>
		<script src="../../Common/js/lib/jquery-3.4.1.min.js"></script>
		<script src="../../Common/js/lib/materialize.min.js"></script>
		<script src="../../Common/js/lib/summernote-0.8.16-dist/summernote-lite.min.js"></script>
		<script src="../../Common/js/lib/summernote-0.8.16-dist/lang/summernote-zh-CN.min.js"></script>
		<script src="../../Common/js/summernote-fix.js"></script>
		<link rel="stylesheet" href="../../Common/css/ufun.css" />
		<link rel="stylesheet" href="../../Common/css/lib/materialize.min.css">
		<link rel="stylesheet" href="../../Common/js/lib/summernote-0.8.16-dist/summernote-lite.min.css" />
		<link rel="stylesheet" href="../../Common/css/summernote-fix.css" />
		<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
		<style>
			.content>div{
				padding: 5vw 5vw 0;
			}
			.chip {
				margin-bottom: 5vw;
				color: var(--color-white);
				background-color: var(--color-gray-medium);
			}
			.chip i {
				color: var(--color-white)!important;
				opacity: 1;
			}
			#CoverImgLabel,
			#TagInput::-webkit-input-placeholder {
				color: var(--color-gray-medium);
			}
			#CoverImgInput {
				position: relative;
				overflow: hidden;
				width: 40vw; /* 4:5 */
				height: 50vw;
				margin: 5vw 0;
				border-radius: 15px;
				background-color: var(--color-gray-light);
			}
			#CoverImgInput i {
				margin: 0 auto;
				color: var(--color-white);
				font-size: 18vw;
			}
			#CoverImg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: block;
			}
			#TagCntInfo {
				color: var(--color-gray-light);
			}
		</style>
	</head>

	<body>
		<div id="TagTemp" class="temp">
			<div class="chip">
				<i class="close material-icons">close</i>
			</div>
		</div>
		<header>
			<div id="Left" class="com-btn" onclick="BackCheck(ThisBack);">
				<i class="material-icons">keyboard_arrow_left</i>
			</div>
			<div id="Title">添加封面和标签</div>
			<div id="Right" class="com-btn" onclick="nextPage();">下一步</div>
		</header>
		<div class="content">
			<div>
				<div id="CoverImgLabel" onclick="coverImgInput.click();">添加封面</div>
				<div id="CoverImgInput">
					<div class="valign-wrapper" style="height: 100%;">
						<i class="material-icons valign">add</i>
					</div>
				</div>
				<input id="TagInput" type="text" placeholder="添加标签(回车键分隔)" maxlength="5"/>
				<div id="TagField"></div>
				<div id="TagCntInfo">
					还可以添加<strong><span id="TagCnt"></span></strong>个标签
				</div>
			</div>
		</div>
	</body>
	<script>
		var current;
		var titleText;
		var introText;
		var contentText;
		var coverImgInput = $('#CoverImgInput')[0];
		var coverImg;
		var tagTemp = $('#TagTemp')[0];
		var tagField = $('#TagField')[0];
		var tagInput = $('#TagInput')[0];
		var tagCnt = $('#TagCnt')[0];

		document.addEventListener('plusready', function() {
			GetStatusTop();
			current = plus.webview.currentWebview();
			titleText = current.title;
			introText = current.intro;
			contentText = current.content;
			havePayment = current.havePayment;
			tagInput.onkeyup = function(e) {
				let str = tagInput.value.trim();
				if (str == '')
					return;
				if (parseInt(tagCnt.innerText) <= 0)
					return;
				if (e.keyCode == 13) {
					if (str.replace(/[^\x00-\xff]/g,"aa").length >= 26) {
						plus.nativeUI.toast('标签不能太长哦');
						return;
					}
					if (str.replace(/[^|\x00-\x1f\x7f\x80-\x9f]/g, '').length !== 0) {
						plus.nativeUI.toast('标签中不能含有特殊字符哦');
						return;
					}
					TagField.innerHTML += TagTemp.innerHTML;
					TagField.lastElementChild.innerHTML += str;
					tagInput.value = '';
				}
			};
			coverImgInput.onclick = function() {
				InitFileInputDOM(coverImgInput, function() {
					Pick(function(base64) {
						if (coverImg) {
							coverImgInput.removeChild(coverImg);
						}
						coverImg = new Image();
						coverImg.src = base64;
						coverImg.id = 'CoverImg';
						coverImgInput.appendChild(coverImg);
					});
				});
			};
			setInterval(function() {
				let nowCnt = 5 - tagField.children.length;
				tagCnt.innerText = nowCnt + '';
				if (nowCnt < 0) {
					tagField.removeChild(tagField.lastChild);
				}
			}, 50);
			DoShow(current, "slide-in-right", 300);
		});

		function nextPage() {
			if (coverImg == null || coverImg.src == null || coverImg.src.trim().length == 0) {
				plus.nativeUI.alert('您还未上传封面哦!', null, '信息不完整');
				return;
			}
			if (tagField.children.length == 0) {
				plus.nativeUI.alert('您还未添加标签哦, 至少添加一个!', null, '信息不完整');
				return;
			}
			OpenWebView('4.html', 'NewLec4', {}, {
				"title": titleText,
				"intro": introText,
				"content": contentText,
				"coverImg": coverImg.src.trim(),
				"tags": getTags(),
			});
		}
		
		function getTags() {
			let children = tagField.children;
			let res = "";
			for (var i = 0; i < children.length; ++i) {
				res += children[i].innerHTML.toString().replace(/<i.*\/i>/, "").trim();
				if (i != children.length - 1)
					res += "|";
			}
			return res;
		}
	</script>
</html>
